<template>
   <div class="amap-page-container">
     

      <!-- 搜索框 -->
      <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
      
      
      <!-- 地图 -->
      <el-amap vid="amapDemo" :center="mapCenter" :zoom="10" class="amap-demo"  :plugin="plugin" :events="events">
        <!-- 搜索框 -->
        <el-amap-marker v-for="marker in markers" :position="marker" ></el-amap-marker>
        <!-- 信息窗体 -->
        <el-amap-info-window
          :position="currentWindow.position"
          :content="currentWindow.content"
          :visible="currentWindow.visible"
          :events="currentWindow.events">
        </el-amap-info-window>
      </el-amap>

      <!-- 信息窗体按钮 -->
      <button @click="switchWindow(0)">Show First Window</button>
      <button @click="switchWindow(1)">Show Second Window</button>
      <!-- 地址 -->
      <div class="toolbar">
        位置: [{{ lng }}, {{ lat }}] 地点: {{ address }}
      </div>




    </div>
</template>





<script>
module.exports = {
  
      data: function() {
        
         let self = this;
        return {
          

///////////搜索框插件/////////////////////////
          markers: [
            [121.59996, 31.197646],
            [121.40018, 31.197622],
            [121.69991, 31.207649]
          ],
          searchOption: {
            city: '上海',
            citylimit: true
          },
          mapCenter: [121.59996, 31.197646],

/////////////工具条插件//////////////
          plugin: ['ToolBar',
          {
            pName: 'MapType',
            events: {
              init(instance) {
                console.log(instance);
              }
            },
          },
          {
            pName: 'Scale',
            events: {
              init(instance) {
                console.log(instance);
              }
            },
            
          },
          {
            pName: 'OverView',
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }
          ],

       

///////////////信息窗体//////////////////
       
          windows: [
            {
              position: [121.5273285, 31.21515044],
              content: 'Hi! I am here!',
              visible: true,
              events: {
                close() {
                  console.log('close infowindow1');
                }
              }
            }, {
              position: [121.5375285, 31.21515044],
              content: 'Hi! I am here too!',
              visible: true,
              events: {
                close() {
                  console.log('close infowindow2');
                }
              }
            }
          ],
           slotWindow: {
            position: [121.5163285, 31.21515044]
          },
          currentWindow: {
            position: [0, 0],
            content: '',
            events: {},
            visible: false
          },



/////////////////////////地址/////////////////////////
          address: '',
          events: {
            click(e) {
              let { lng, lat } = e.lnglat;
              self.lng = lng;
              self.lat = lat;

              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });        
              geocoder.getAddress([lng ,lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    self.address = result.regeocode.formattedAddress;
                    self.$nextTick();
                  }
                }
              });        
            }
          },
          lng: 0,
          lat: 0





        };
      },




      mounted() {
        ///////////////信息窗体//////////////////
        this.currentWindow = this.windows[0];
      },




      methods: {
///////////////////搜索框插件/////////////////////////
        addMarker: function() {
          let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
          let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
          this.markers.push([lng, lat]);
        },
        onSearchResult(pois) {
          let latSum = 0;
          let lngSum = 0;
          if (pois.length > 0) {
            pois.forEach(poi => {
              let {lng, lat} = poi;
              lngSum += lng;
              latSum += lat;
              this.markers.push([poi.lng, poi.lat]);
            });
            let center = {
              lng: lngSum / pois.length,
              lat: latSum / pois.length
            };
            this.mapCenter = [center.lng, center.lat];
          }
        },

///////////////信息窗体//////////////////
        switchWindow(tab) {
          this.currentWindow.visible = false;
          this.$nextTick(() => {
            this.currentWindow = this.windows[tab];
            this.currentWindow.visible = true;
          });
        }


      }
    };
</script>





<style scoped>
 .amap-demo {
      height: 1000px;
    }

    .search-box {
      position: absolute;
      top: 25px;
      left: 100px;
    }

    .amap-page-container {
      position: relative;
    }

</style>
